<template>
  <div>
    <div class="top">
      <van-search
        v-model="value"
        shape="round"
        background="#f00"
        placeholder="请输入搜索关键词"
      />

    </div>
    <div class="bigbox">
      <!-- 侧边栏开始 -->
      <div class="nav">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            @click="changeType"
            v-for="type in types"
            :key="type.id"
            :title="type.name"
            :badge="type.count"
         />
        </van-sidebar>
      </div>
      // <!-- 侧边栏结束-->
      // <!-- 内容盒子 -->
      <div class="products">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="product" v-for="product in pros" :key="product.id">
            <img :src="product.banner" alt="" />
            <p >{{ product.name }}</p>
            <p style="font-size: 20px;
                font-weight: bold;
                color: #f00;">
                价格：¥{{ product.price }}元</p>
            <van-button @click="addcart(product)" round type="warning">加入购物车</van-button>
          </div>
        </van-list>
      </div>
    </div>
  </div>
  
</template>

<script>
import Vue from "vue";
import { Search } from "vant";
import { Sidebar, SidebarItem } from "vant";
import { getTypes, getPro,addCart } from "@/request";
import { Button } from "vant";
import { List } from "vant";
import { Toast } from "vant";
import {getCookie} from '@/utils/cookie';

Vue.use(Toast);
Vue.use(List);
Vue.use(Button);
Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Search);
export default {
  data() {
    return {
      value: "",
      activeKey: 0,
      types: [],
      pros: [], //用来接受商品数据的
      loading: false,
      finished: false,
      //   因为这个懒加载原理跟分页差不多,定义一个第几页
      page: 1,
      typename: "",
    };
  },
  created() {
    this.typename = this.$route.query.typename || '全部'
    this.requsest();
  },
  methods: {
    async requsest() {
      var types = await getTypes();
      //   var pros = await getPro();
      types.unshift({
        id: +new Date(),
        name: "全部",
      });
      //   console.log(types);
      this.types = types;
      //   this.pros = pros;
      var index = this.types.findIndex(item => item.name === this.typename)
      this.activeKey = index
    },
    onLoad() {
      this.getProducts();
    },
    getProducts() {
      getPro(this.typename).then((data) => {
        var pros = data.slice((this.page - 1) * 5, this.page * 5);
        // console.log(pros.length);
        if (pros.length < 5) {
          this.finished = true;
        } else {
          this.page++;
        }
        this.loading = false;
        this.pros = this.pros.concat(pros);
        // console.log(pros)
      });
    },
    changeType(index) {
      this.typename = this.types[index].name;
    //   getPro(typename).then((data) => {
    //     this.pros = data;
    //   });

    this.page = 1
    this.pros = []
    this.finished = false
    this.getProducts()
    },
    addcart(product){//加入购物车
    var _this =this
    //
    var username = getCookie('username')
    //没有登录强行跳转到登录页面
    if(!username){
      Toast.fail({
        message:'请先登录',
        onClose(){
          //先将当前路径存储在本地存储-做标记
          window.localStorage.setItem('url','/types')
          _this.$router.push('/my/login')
        }
      });
    }else{
      product.username = username
      product.number = 1
      //将product中的id删除
      if(product.id){
        product.pid = product.id
        delete product.id
      }
      addCart(product).then(data=>{
        Toast.success(data.msg)
      })
    }
    }
  },
};
// setup(){
//     const list = [...Array(50).keys()];
//     return { list };
//   }
</script>

<style scoped>
.top {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
}
.nav{
  float: left;
  position:fixed;
  margin-top: 40px;
}
.products{
  float: right;
  padding: 0px 10px;
}
.product{
        width: 400px;
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 10px;
        margin-bottom: 50px;
}
.product img{
      width: 100%;
      border-radius: 10px;
}
.product .price{
      font-size: 20px;
      font-weight: bold;
      color: #f00;
}
.product .van-button{
      width: 100%;
      font-size: 18px;
}
.product .proname{
      line-height: 28px;
}
</style>
